<head>
    <link href="${ctx}/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/font-awesome/3.0.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/css/index.css" rel="stylesheet">
    <link href="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.css" rel="stylesheet">
    <script src="${ctx}/jquery/2.1.4/jquery.min.js"></script>
    <script src="${ctx}/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/extensions/export/bootstrap-table-export.min.js"></script>
    <script src="${ctx}/js/extends.js"></script>
    <script src="${ctx}/layui/layui.all.js"></script>
    <script src="${ctx}/js/util.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <link href="${ctx}/layui/css/layui.css" rel="stylesheet">
</head>
<title>师徒统计分页</title>
<div class="lay-box">
    <form class="layui-form" action="" style="margin-top: 10px">
        <div class="layui-inline">
            <label class="layui-form-label" style="width: 120px">重新统计日期</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="last" placeholder="请选择时间">
            </div>
        </div>
        <div class="layui-inline" style="margin: 0 0 8px 20px;">
            <label class="layui-form-label" style="width: 95px">起始时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="star" placeholder="请选择时间">
            </div>
        </div>
        <div class="layui-inline" style="margin: 0 0 8px 20px;">
            <label class="layui-form-label" style="width: 95px">结束时间</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="end" placeholder="请选择时间">
            </div>
        </div>

        <div style="width: 150px;display: inline-block;margin: 0 0 8px 20px;">
            <select name="appStore" id="appStore" lay-verify="" style="width: 300px">
                <option value="all">全部渠道</option>
                <#list appStoreList as list>
                    <option value="${list.code}">${list.name}</option>
                </#list>
            </select>
        </div>
        <input type="text" placeholder="请输入渠道" id="likeBrand">

        <div style="width: 150px;display: inline-block;margin: 0 0 8px 20px;">
            <select name="category" id="category" lay-verify="" style="width:300px">
                <option value="2">全部用户</option>
                <option value="0">老用户</option>
                <option value="1">新用户</option>
            </select>
        </div>


    </form>
    <button class="layui-btn" onclick="lastCheck()" style="float: left;margin-left:20px">
        <i class="layui-icon">&#xe669;</i> 统计日期
    </button>
    <span onclick="search()" class="btn btn-info" style="height: 38px;margin-left: 10px;font-size: 14px">查询</span>

    <#-- 统计图 -->
    <div class="cl" style="margin-top: 30px">
        <div id="chart" style="min-width: 300px;height:400px"></div>
    </div>

    <table class="table table-border table-bordered table-hover table-bg table-sort" id="layTable"
           lay-filter="tableFilter">

    </table>
</div>

<style>
    .lay-box {
        padding: 8px 12px;
    }

    .layui-form-checkbox[lay-skin=primary] i {
        top: 5px;
    }
</style>
<script type="text/html" id="barDemo">

    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<!--请在下方写此页面业务相关的脚本-->
<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="sexDemo" {{
           d.enable== 1 ? 'checked' : '' }}>
</script>

<script type="text/javascript">
    function lastCheck(){
        var last = $("#last").val();
        $.ajax({
            url: "/sys/cencesmaster/lastCheck",
            type: 'post',
            data: {date: last},
            async: false,
            dataType: "json",
            success: function (arg) {
                if (arg) {
                    layer.msg(arg.message);
                    search();
                } else {
                    layer.msg(arg.message);
                }
            }
        });
    }
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#star'
            , type: 'datetime'
            , format: 'yyyyMMdd'

        });
        laydate.render({
            elem: '#end'
            , type: 'datetime'
            , format: 'yyyyMMdd'
        });
        laydate.render({
            elem: '#last'
            , type: 'date'
            ,format: 'yyyy-MM-dd'
        });
    });
    var startDate = "";
    var endDate = "";
    var searchKey = "";
    var tableIns;
    var ids = "";
    var form;
    var table = "cences_master";
    layui.use('table', function () {
        tableIns = layui.table,
            form = layui.form;
        form.render();
        tableIns.render({
            elem: '#layTable'
            ,
            url: '/sys/cencesmaster/page'

           , done: function(res, curr, count){
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);

                //得到当前页码
                console.log(curr);

                //得到数据总量
                console.log(count);
                listData(res);
            },
            method: 'POST'
            ,
            where: {
                type: 1,
                category:2,
                appStore:"all"
            }
            ,
            id: 'dataTableId'
            ,
            cols: [[
                {type: 'checkbox', field: 'id'}
                , {
                    field: 'time',
                    title: '记录日期',
                    align: 'center',
                    sort: true,
                    templet: function (data) {
                        if(data.time<0){
                            return '统计';
                        }else {
                            return data.time;
                        }
                    }
                }
                , {
                    field: 'apprenticeCount',
                    title: '收徒数',
                    align: 'center',
                    sort: true
                }
                , {
                    field: 'rebateApprenticeMoney',
                    title: '徒弟佣金',
                    align: 'center',
                    sort: true,
                    templet: function (data) {
                        return data.rebateApprenticeMoney / 100 + '元';
                    }
                }
                , {
                    field: 'discipleCount',
                    title: '收徒孙数',
                    align: 'center',
                    sort: true
                }
                , {
                    field: 'rebateDiscipleMoney',
                    title: '徒孙佣金',
                    align: 'center',
                    sort: true,
                    templet: function (data) {
                        return data.rebateDiscipleMoney / 100 + '元';
                    }
                }
                , {
                    field: 'brand',
                    title: '安装渠道',
                    align: 'center',
                    sort: true
                }
                // , {
                //     field: 'type',
                //     title: '1总计0分渠道',
                //     width: 150,
                //     align: 'center',
                //     sort: true
                // }
                // , {
                //     field: 'category',
                //     title: '1新用户0老用户',
                //     width: 150,
                //     align: 'center',
                //     sort: true,
                //     templet: function (data) {
                //         if(data.category>0){
                //             return '新用户';
                //         }else {
                //             return '老用户';
                //         }
                //     }
                // }

                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150, align: 'center'}

            ]]
            ,
            page: true
        });

        form.on('switch(sexDemo)', function (obj) {
            // layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
            if (obj.elem.checked) {
                commonenable(this.value, 1);
            } else {
                commonenable(this.value, 0);
            }

        });
        tableIns.on('checkbox(tableFilter)', function (obj) {
            var checkStatus = tableIns.checkStatus('dataTableId');
            var dataList = checkStatus.data;
            if (dataList != null && dataList.length > 0) {

                for (var i = 0; i < dataList.length; i++) {
                    ids += dataList[i].id + ",";
                }
            }
        });

        function deleteId(ids) {
            if (ids != "") {
                $.ajax({
                    url: "/sys/cencesmaster/delete",
                    type: 'post',
                    data: {"id": ids},
                    async: false,
                    dataType: "json",
                    success: function (arg) {
                        if (arg) {
                            layer.msg(arg.message);
                            search();
                        } else {
                            layer.msg(arg.message);
                        }
                    }
                });
            }
        }

        $("#multiDelete").click(function () {
            deleteId(ids)
        });

        tableIns.on('tool(tableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    deleteId(data.id)
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer_show("修改", "/sys/cencesmaster/edit?id=" + data.id, "650", "650");
                parent.search();
            }
        });
    });

    // 绘制图表
    var myChart = echarts.init(document.getElementById('chart'));
    window.addEventListener("resize",function(){
        myChart.resize();
    });
    myChart.setOption({
        title: {
            text: '师徒统计'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['收徒数', '徒弟佣金','收徒孙数', '徒孙佣金']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        color:['#b2efd6','#ffd7b0','#9bc8ff','#d1cfff'],//折线颜色
        series: [
            {
                name: '收徒数',
                type: 'line',
                smooth: true, // 设置曲折点出呈圆滑
                symbol: 'circle',
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#ffe'
                        }, {
                            offset: 1,
                            color: '#b2efd6'
                        }])
                    }
                },

                data: []
            },
            {
                name: '徒弟佣金',
                type: 'line',
                smooth: true, // 设置曲折点出呈圆滑
                symbol: 'circle',
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#ffe'
                        }, {
                            offset: 1,
                            color: '#ffd7b0'
                        }])
                    }
                },
                data: []
            },
            {
                name: '收徒孙数',
                type: 'line',
                smooth: true, // 设置曲折点出呈圆滑
                symbol: 'circle',
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#ffe'
                        }, {
                            offset: 1,
                            color: '#9bc8ff'
                        }])
                    }
                },
                data: []
            },
            {
                name: '徒孙佣金',
                type: 'line',
                smooth: true, // 设置曲折点出呈圆滑
                symbol: 'circle',
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#ffe'
                        }, {
                            offset: 1,
                            color: '#d1cfff'
                        }])
                    }
                },
                data: []
            }
        ]
    });

    function listData(data){
        var apprentice = [];
        var apprenticeRebate = [];
        var disciple = [];
        var discipleRebate = [];
        var date = [];
        data.data.forEach((item,index)=>{
            if (index<data.data.length-1) {
                apprentice.push(item.apprenticeCount);
                apprenticeRebate.push(item.rebateApprenticeMoney/100);
                disciple.push(item.discipleCount);
                discipleRebate.push(item.rebateDiscipleMoney/100);
                date.push(item.time);
            }
        });
        myChart.setOption({
            xAxis: {
                data:date
            },
            series: [
                {
                    name: '收徒数',
                    data: apprentice
                },
                {
                    name: '徒弟佣金',
                    data:apprenticeRebate
                },
                {
                    name: '收徒孙数',
                    data:disciple
                },
                {
                    name: '徒孙佣金',
                    data:discipleRebate
                }
            ]
        });
    }


    function search() {
        var star = $("#star").val();
        var end = $("#end").val();
        var appStore = $("#appStore").val();
        var category = $("#category").val();
        var type=0;

        if(appStore==="all"&&category==="2"){
            type=1;
        }
        if(appStore==="all"&&category!=="2"){
            type=1;
        }
        if(appStore!=="all"&&category==="2"){
            type=1;
        }

        tableIns.reload('dataTableId', {
            where: {likeBrand:$("#likeBrand").val(),star: star, end: end, appStore: appStore, category: category,type:type},
            page: {
                curr: 1
            }
        });
    }


    function gradeEdit() {
        layer_show("新增", "/sys/cencesmaster/add", "650", "600");
    }

    function showmsg(msg) {
        layer.msg(msg)
    }

    function commonenable(id, status) {
        $.ajax({
            url: "/common/commonSwitch",
            type: 'post',
            data: {"table": table, "id": id, "status": status, "feild": "has_deleted"},
            async: false,
            dataType: "json",
            success: function (req) {
                if (req.success) {
                    search();
                    layer.msg(req.message, {icon: 1})
                } else {
                    layer.msg(req.message, {icon: 2})
                }
            }
        });
    }


</script>
<!--/请在上方写此页面业务相关的脚本-->
